<template>
    <view>
        <view class="good-tips" v-if="item.remain > 0">
            <text class="icon">&#xe60a;</text>
            <text>今日还可采购该商品{{ item.remain }}件</text>
        </view>
        <uni-swipe-action>
            <uni-swipe-action-item :disabled="disabled" :right-options="options" :threshold="0" @click="modelAction(item)">
                <view class="order-items" id="guide001">
                    <view class="wrapper-1">
                        <view class="good-title u-line-2">{{ item.name }}</view>
                    </view>
                    <view class="wrapper-2">
                        <!-- 勾选 -->
                        <view class="model-check">
                            <text v-if="showCheck" class="icon" :class="item.check ? 'icon-checked-cube' : 'icon-check-cube'" @click="onModelSelectHandler(item)"></text>
                        </view>
                        <view class="model">
                            <view class="u-flex">
                                <view class="o-flex-shrink">款号：</view>
                                <view class="bg">{{ item.modelNo }}</view>
                            </view>
                            <view v-if="item.collarName != '无领'" class="collar-span">
                                <text>{{ item.collarText }}：</text>
                                <text class="bg" style="letter-spacing: 4rpx">{{ item.collarName }}</text>
                            </view>
                        </view>
                        <u-button type="s" :hair-line="false" @click="editContent(item)" v-if="type === 0">编辑规格</u-button>
                    </view>
                </view>
            </uni-swipe-action-item>
        </uni-swipe-action>
        <view class="division-line"></view>
        <view class="skus">
            <uni-swipe-action>
                <uni-swipe-action-item :disabled="disabled" v-for="itm in computedList(item.children)" :key="itm.unid" :right-options="options" @click="action(itm)">
                    <view class="skus-items-wrapper" id="guide002">
                        <view class="skus-items" :class="{ 'skus-items-disabled': itm.num > itm.stock, 'skus-items-unSale': itm.onSale == 0 }">
                            <view class="sku-content">
                                <!-- 规格 图 -->
                                <view class="left">
                                    <view class="checkAndImg">
                                        <!-- 勾选 -->
                                        <view class="check-wrap" v-if="showCheck" @click="onChangehandler(itm)" :class="{ 'sales-out': isSalesOut(itm) }">
                                            <text class="icon" :class="itm.check ? 'icon-checked-cube' : 'icon-check-cube'"></text>
                                        </view>
                                        <view v-if="!showCheck" style="width: 30rpx"></view>
                                        <view class="image-wrapper">
                                            <img-cache class="model-img" :src="itm.picId ? `${global.productImageUrl}${itm.picId}/1` : `/static/images/placeholder.png`" width="150" height="150" border-radius="10" @click="showGoodsDtl(itm)" />
                                            <!-- 缺货标志 -->
                                            <view class="sale-out" v-if="type == 0 && isSalesOut(itm)"><view class="inner-text">已抢光</view></view>
                                        </view>
                                    </view>
                                    <view class="sku-content-value" :class="{ 'sales-out': isSalesOut(itm) }">
                                        <view class="colorName">{{ itm.colorName }}</view>
                                        <view class="model-label">({{ itm.modelNo }})</view>
                                        <view class="collarName" v-if="itm.collarName != '无领'">{{ itm.collarName }}</view>
                                        <view class="price" :class="{ 'sales-out': isSalesOut(itm) }">单价：￥{{ itm.userPrice }}</view>
                                    </view>
                                </view>
                                <view class="vertical-line"></view>
                                <!-- 右侧信息 -->
                                <view class="right-part">
                                    <view v-for="(c, i) in itm.list" :key="c.id">
                                        <view class="right-part-line2" :style="getStyle(c)">
                                            <view class="sub-text">
                                                <text class="skus-items-size">{{ c.sizeName || '空' }}</text>
                                                <view class="">
                                                    <text v-if="c.onSale == 0" class="notSales">已下架</text>
                                                    <text v-else-if="c.stock <= 0" class="noCount">缺货</text>
                                                    <text v-else>{{ $STOCK(c.stock) }}</text>
                                                </view>
                                            </view>
                                            <view v-if="c.num == 0" @click="addThisSkuNum(c, good, itm.check)"><text class="add-btn">可&nbsp;选</text></view>
                                            <view v-else>
                                                <view v-if="!c.showNumbox" @click="showNumboxFn(c)" class="sku-num-style">x {{ c.num }}</view>
                                                <uni-number-box v-if="c.showNumbox" v-model="c.num" @change="countchange($event, c, good)" :disabled="c.onSale === 0 || c.stock <= 0" :max="c.stock" :key="'numberBox' + c.id" />
                                            </view>
                                        </view>
                                        <view class="borderBottom"></view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </uni-swipe-action-item>
            </uni-swipe-action>
        </view>
        <view class="content-bottom-bar">
            <view class="u-flex u-col-center">
                <text style="font-size: 28rpx; font-weight: bold">金额：</text>
                <view class="total-price">￥{{ item.subPrice }}</view>
            </view>
            <view class="u-flex-1 u-text-right">小计 {{ item.subCount }} 件</view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { computed, reactive } from 'vue'
import global from '@/config'
import { useGlobalStore } from '@/store'

interface dataprops {
    item: any
    good?: any
    showCheck?: boolean
    type?: number
    disabled?: boolean
}

const globalStore = useGlobalStore()

const emit = defineEmits(['deleteModel', 'modelCheck', 'edit', 'deleteColor', 'check', 'add', 'showNumbox', 'change'])

const props = withDefaults(defineProps<dataprops>(), {
    item: () => ({}),
    good: () => ({}),
    showCheck: false,
    type: 0,
    disabled: false
})

/** 计算是否售空 */
const isSalesOut = computed(() => {
    return function (itm: any) {
        return !itm.list.some((m: any) => m.stock > 0)
    }
})

/** 根据库存状态 返回不同的颜色 */
const getStyle = computed(() => {
    return function (c: any) {
        // 有货 但未选
        if (c.onSale == 1 && c.stock > c.num && c.num == 0) {
            return {
                color: '#BCBCBC'
            }
        }
        //  有货 已选
        if (c.onSale == 1 && c.stock > c.num && c.num > 0) {
            return {
                color: '#333333'
            }
        }
        // 下架 或者 缺货
        if (c.stock < c.num || c.onSale == 0 || c.stock <= 0) {
            return {
                color: '#D5D5D5'
            }
        }
    }
})

const computedList = computed(() => {
    return function (children: any): Array<any> {
        return Object.values(children)
    }
})
/** 库存字段 */
const $STOCK = computed(()=>{
    return function(num: number| string){
        return globalStore.setStockName(num)
    }
})
const options = reactive([{
    text: '删除',
    style: {
        backgroundColor: '#dd524d'
    }
}])

function modelAction(e: any) {
    console.log(e)
    uni.$u.$showModal({
        content: '是否确认删除这个领型?',
        success: (res: any) => {
            if (res.confirm) {
                emit('deleteModel', e)
            }
        }
    })
}
/** 领型勾选 */
function onModelSelectHandler(item: any) {
    emit('modelCheck', item)
}
/** 编辑规格 */
function editContent(item: any) {
    emit('edit', item)
}

function action(e: any) {
    uni.$u.$showModal({
        content: '是否确认删除这个颜色?',
        success: (res: any) => {
            if (res.confirm) {
                for (let key in props.item.children) {
                    if (props.item.children[key].unid == e.unid) {
                        let arr = props.item.children[key].list.map((m: any) => {
                            return {
                                releaseSkuId: m.releaseSkuId,
                                releaseId: m.releaseId,
                                num: 0
                            }
                        })
                        delete props.item.children[key]
                        emit('deleteColor', arr)
                    }
                }
                // 删除之后 不需要判断  直接更新 购物车 页面
            }
        }
    })
}

function onChangehandler(item: any) {
    emit('check', item)
}

function addThisSkuNum(c: any, good: any, check: boolean) {
    emit('add', c, good, check)
}

function showNumboxFn(c: any) {
    emit('showNumbox', c)
}

function countchange(e: any, c: any, good: any) {
    emit('change', e, c, good)
}

function showGoodsDtl({ releaseId }: { releaseId: string | number }) {
    uni.$u.$MRouter.details.to({ id: releaseId })
}
</script>

<style scoped lang="scss">
@import './style.scss';
</style>
